<template>
<el-container class="el-container" direction="vertical">
  <el-row>
    <el-table
      :data="tableData"
      v-loading="loading"
      border
      style="width: 100%; margin-top: 20px;">
      <el-table-column prop="id" label="近期赛事">
        <template slot-scope="scope">
          <el-row>
            <el-col :span="4">
              <span @click="goDetail(scope.row)"><el-image class="li-img" :src="scope.row.image"></el-image></span>
            </el-col>
            <el-col :span="20">
              <el-row class="li-content"><span style="font-size: 16px;">
              <span @click="goDetail(scope.row)" class="li-a">{{scope.row.eventName}}</span>
            </span></el-row>
              <el-row class="li-content">
                <i class="el-icon-location-information them-color"></i>
                <span class="li-item">{{scope.row.place}}号场馆</span>
              </el-row>
              <el-row class="li-content">
                <i class="el-icon-time them-color"></i>
                <span class="li-item">{{scope.row.startTime}} ~ {{scope.row.endTime}}</span>
              </el-row>
              <el-row>
              <span class="tmp"><i class="el-icon-document them-color" style="margin: 5px"></i>
              {{scope.row.eventDescr === '' ? '-' : scope.row.eventDescr}}
              </span>
              </el-row>
              <el-row style="position: absolute; bottom: 10px">
                <span class="sale-price">{{scope.row.lowPrice}}-{{scope.row.highPrice}} <span style="font-size: 14px">元</span></span>
                <span style="margin-left: 10px" class="li-item">{{scope.row.onSale === 1 ? '售票中' : '暂停售票'}}</span>
              </el-row>
            </el-col>
          </el-row>
        </template>
      </el-table-column>
    </el-table>
  </el-row>
  <el-row>
    <el-pagination
      class="pagination"
      background
      layout="prev, pager, next"
      :total="total"
      @current-change="handleCurrentChange"
    :page-size="pageSize">
    </el-pagination>
  </el-row>
</el-container>
</template>

<script>
export default {
  name: 'EtsList',
  created () {
    let eventName = this.$route.query.eventName
    if (eventName) {
      this.getEventList(eventName)
    } else {
      this.getEventList()
    }
  },
  data () {
    return {
      total: 10,
      pageSize: 10,
      curPage: 1,
      loading: true,
      tableData: []
    }
  },
  methods: {
    getEventList (eventName) {
      let _this = this
      let getUrl = '/api/events?page=' + _this.curPage + '&pageSize=' + _this.pageSize
      if (eventName) {
        getUrl += '&eventName=' + eventName
      }
      this.$axios({
        url: getUrl,
        method: 'get',
        headers: {
          'Content-Type': 'application/json; charset=utf-8',
          'token': _this.getToken()
        }
      }).then((response) => {
        if (response.data.code === 1) {
          let resData = response.data.data
          _this.tableData = resData.rows
          _this.total = resData.total
          document.documentElement.scrollTop = 0
          _this.loading = false
        } else {
          _this.isTokenExpired(_this, response.data.msg)
          this.err(response.data.msg)
        }
      })
    },
    handleCurrentChange (val) {
      this.curPage = val
      this.loading = true
      this.getEventList()
    },
    goDetail (row) {
      let routeData = this.$router.resolve({
        name: 'Detail',
        params: {
          id: row.eventID
        },
        query: {
          title: row.eventName
        }
      })
      window.open(routeData.href, '_blank')
    }
  }
}
</script>

<style scoped>
.el-container{
  width: 80%;
  margin: 0 auto;
}
.li-img{
  height: 250px;
  width: 185px;
}
.li-img:hover{
  cursor: pointer;
}
.li-content{
  margin: 5px;
}
.li-item{
  color: #999999;
}
.them-color{
  color: var(--them-color);
  font-weight: bold;
}
.sale-price{
  color: #FF1268;
  font-size: 18px;
  font-weight: bold;
}
.tmp{
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  width: 600px;
  /* autoprefixer: ignore next */
  -webkit-box-orient: vertical;
  color: #999999;
}
.li-a{
  color: black;
}
.li-a:link{
  color: var(--them-color);
  text-decoration:none;
}
.li-a:active{
  color: black;
}
.li-a:visited{
  color: black;
}
.li-a:hover{
  color: var(--them-color);
  text-decoration: var(--them-color);
  cursor:pointer;
}

/* 修改表格悬停颜色 */
/deep/ .el-table--enable-row-hover .el-table__body tr:hover>td{
  background-color: transparent !important;
}

.pagination{
  margin-top: 20px;
}
</style>
